@import "./Variables.scss";

*[data-todotxt-attribute] {
  --color1: #5a5a5a;
  --color2: #ccc;
  .overlay {
    svg {
      color: var(--color1);
    }
  }

  .MuiBadge-root {
    &.notify {
      .MuiBadge-badge {
        color: white;
        background: #FF3860;
      }
    }
  }

  button,
  button:hover {
    color: var(--color1);
    background: var(--color2);
    &:focus-visible {
      outline-color: var(--color1);
    }
    .MuiChip-root {
      color: white;
      background: var(--color1);
    }
  }
  .MuiBadge-badge {
    border-radius: 1em;
    color: var(--color2);
    background: var(--color1);
  }
  .MuiBadge-dot {
    background: #FF3860;
  }
  &.selected {
    button {
      color: white;
      background: var(--color1);
    }
  }
  &.selected.excluded {
    button {
      color: var(--color1);
      background: var(--color2);
    }
  }
}

*[data-todotxt-attribute="priority"] {
  --color1: white;
  button {
    &.Mui-disabled {
      color: white;
    }
  }
  &.selected {
    button {
      color: white;
      background: #5a5a5a;
    }
  }  
  .overlay {
    svg {
      color: var(--color2);
    }
  }
}

*[data-todotxt-attribute="priority"][data-todotxt-value="A"] {
  --color2: #FF3860;
  border-left-color: var(--color2);
  &.selected {
    button {
      background: darken(#FF3860, 25%);
    }
  }
}

*[data-todotxt-attribute="priority"][data-todotxt-value="B"] {
  --color2: #fa745e;
  border-left-color: var(--color2);
  &.selected {
    button {
      background: darken(#fa745e, 25%);
    }
  }  
}

*[data-todotxt-attribute="priority"][data-todotxt-value="C"] {
  --color2: #FFDD57;
  border-left-color: var(--color2);
  &.selected {
    button {
      background: darken(#FFDD57, 25%);
    }
  }  
}

*[data-todotxt-attribute^="pm"] {
  --color1: rgb(221, 44, 0);
  --color2: white;
  button {
    svg {
      margin: 0 0.2em;
    }
    &.Mui-disabled {
      color: white;
    }
  }
  .overlay {
    svg {
      color: var(--color2);
    }
  } 
  &.selected {
    button {
      color: white;
      background: rgb(221, 44, 0);
    }
  } 
}

*[data-todotxt-attribute="projects"] {
  --color1: #6f266f;
  --color2: #f1d6f1;
}

*[data-todotxt-attribute="contexts"] {
  --color1: #1e6251;
  --color2: #c5ede3;
}

.darkTheme {

  *[data-todotxt-attribute]:not([data-todotxt-attribute="priority"], [data-todotxt-attribute="projects"], [data-todotxt-attribute="contexts"], [data-todotxt-attribute^="pm"]) {
    --color1: #f0f0f0;
    --color2: #5a5a5a;
    button {
      .MuiChip-root {
        
        background: darken(#5a5a5a, 10%);
      }      
    }
    &.selected {
      button {
        background: darken(#5a5a5a, 10%);
      }
    }
  }

  *[data-todotxt-attribute="contexts"] {
    --color1: #c5ede3;
    --color2: #1e6251;
    &.selected {
      button {
        background: darken(#1e6251, 10%);
      }
    }
  }
  *[data-todotxt-attribute="projects"] {
    --color1: #f1d6f1;
    --color2: #6f266f;
    &.selected {
      button {
        background: darken(#6f266f, 10%);
      }
    }
  }

}